<template>
  <div class="history">
    <div class="tit">
      <span>历史数据</span>
    </div>
    <div class="condition">
      <el-date-picker
        style="width: 3.5rem;"
        @change="trandate"
        v-model="pst"
        type="daterange"
        range-separator="-"
        start-placeholder="开始布设日期"
        end-placeholder="结束布设日期">
      </el-date-picker>
      <div style="width: .1rem;"></div>
      <el-date-picker
        style="width: 3.5rem;"
        @change="trandates"
        v-model="rst"
        type="daterange"
        range-separator="-"
        start-placeholder="开始回收日期"
        end-placeholder="结束回收日期">
      </el-date-picker>
      <div style="width: .1rem;"></div>
      <el-select v-model="cardNum" clearable filterable
                 @change="changecard"
                 @focus="Closefocus"
                 placeholder="卡编号">
        <el-option
          v-for="item in cardNumArr"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <div style="width: .1rem;"></div>
      <div class="psw"
           :style="pswb?'border-color: #00C244;':'border-color: #DCDFE6;'"
           @click="openpsw"
           v-click-outside="handleClose">
        <div class="sel_one"
             :title="pswork"
             :style="pswork=='布设人员'?'color: #ccc':'color: #000'">
          {{pswork}}
        </div>
        <span style=" color: #ccc;" :class="pswb?'el-icon-arrow-up':'el-icon-arrow-down'"></span>

        <!--布设人员-->
        <div class="wcr" v-show="pswb">
          <el-checkbox-group v-model="pswList" @change='getpswb'>
            <el-checkbox style="width: 80px;margin-right: 0;" v-for="(wr,index) in worker" :key="index"
                         :label="wr.zhName"></el-checkbox>
          </el-checkbox-group>
        </div>
        <!--布设人员-->

      </div>
      <div style="width: .1rem;"></div>
      <div class="prw"
           :style="prwb?'border-color: #00C244;':'border-color: #DCDFE6;'"
           @click="openprw"
           v-click-outside="handle">
        <div class="sel_one"
             :style="prwork=='回收人员'?'color: #ccc':'color: #000'"
             :title="prwork">
          {{prwork}}
        </div>
        <span style=" color: #ccc;" :class="prwb?'el-icon-arrow-up':'el-icon-arrow-down'"></span>

        <!--布设人员-->
        <div class="wcr" v-show="prwb">
          <el-checkbox-group v-model="prwList" @change='getprwb'>
            <el-checkbox style="width: 80px;margin-right: 0;" v-for="wr in worker" :key="wr.id"
                         :label="wr.zhName"></el-checkbox>
          </el-checkbox-group>
        </div>
        <!--布设人员-->
      </div>
      <el-form label-width="80px" style="height: .4rem;display:flex;align-items: center">
        <el-form-item label="相机状态" style="width: 3.8rem;margin-bottom: 0;">
          <el-radio-group v-model="crstatus" @change="changecrstatus">
            <el-radio style="margin-right: .1rem;" label="已回收">已回收</el-radio>
            <el-radio style="margin-right: .1rem;" label="未回收">未回收</el-radio>
            <el-radio style="margin-right: .1rem;" label="已发布">已发布</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <!--     列表 B-->
    <table>
      <thead>
      <th>布设时间</th>
      <th>回收时间</th>
      <th>相机编号</th>
      <th>布设人员</th>
      <th>回收人员</th>
      <th>回收情况</th>
      <th>鉴定情况</th>
      <th>详情</th>
      <th>操作</th>
      </thead>
      <tbody>
      <tr v-for="(sl,index) in searchList">
        <td>{{sl.layTimeLong | cDate}}</td>
        <td v-if="sl.recovDateLong == null">--</td>
        <td v-if="sl.recovDateLong != null">{{sl.recovDateLong | cDate}}</td>
        <td>{{sl.cameraCardId}}</td>
        <td>{{sl.layUser}}</td>
        <td>{{sl.recovUser}}</td>
        <td>{{filtration(sl.status)}}</td>
        <td>{{sl.imageTotalNum - sl.unIdentifyImageNum}}/{{sl.imageTotalNum}}</td>
        <td
          @click="gohistorydel(sl)"
          style="color: #409EFF;cursor: pointer">查看
        </td>
        <td style="cursor: pointer">
          <span
            @click="openmapcr(sl)"
            class="el-icon-map-location"></span>
          &nbsp;
          &nbsp;
          <span
            @click="delmessage(sl)" v-if="abilityList.indexOf('edit')!=-1"
            class="el-icon-delete"></span>
        </td>
      </tr>
      </tbody>
    </table>
    <!--     列表 E-->
    <!--分页 B-->
    <div class="pagecr">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size=pageSize
        :current-page.sync="currentPage"
        layout="total,prev,pager,next,jumper"
        :total=totalNumber>
      </el-pagination>
    </div>
    <!--分页 B-->


    <!--地图弹窗 B-->
    <div class="mapPup" v-if="isMap">
      <div class="mapcr">
        <div class="colse" @click="colsemap">
          <img src="../../static/images/icon/close.png" alt="">
        </div>

        <!--    地图 B-->
        <Bmap ref='baseMap'></Bmap>
        <!--    地图 E-->

      </div>
    </div>
    <!--地图弹窗 E-->


  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import Bmap from './Map'
  //  import clickOutside from '../utils/clickout'

  const clickOutside = {
    // 初始化指令
    bind(el, binding, vnode) {
      function documentHandler(e) {
        // 这里判断点击的元素是否是本身，是本身，则返回
        if (el.contains(e.target)) {
          return false
        }
        // 判断指令中是否绑定了函数
        if (binding.expression) {
          // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
          binding.value(e)
        }
      }

      // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
      el.__vueClickOutside__ = documentHandler
      document.addEventListener('click', documentHandler)
    },
    update() {
    },
    unbind(el, binding) {
      // 解除事件监听
      document.removeEventListener('click', el.__vueClickOutside__)
      delete el.__vueClickOutside__
    }
  }

  export default {
    components: {
      'Bmap': Bmap
    },
    data() {
      return {
        areaId: "",
        cardNum: "",
        cardNumArr: [],
        psw: "",
        pswork: "布设人员",
        prwork: "回收人员",
        pswb: false,
        prwb: false,
        pst: "",
        rst: "",
        t1: "",
        t2: "",
        crstatus: "已回收",
        pswList: [],
        prwList: [],
        worker: [],
        searchList: [],
        pageNum: 1,
        pageSize: 10,
        totalNumber: 0,
        isMap: false,
        currentPage: 1,
        abilityList: []
      }
    },
    mounted() {
    },
    directives: {clickOutside},
    created() {
      //获取areaid
      this.areaId = sessionStorage.getItem('areaId');
      this.getcn();
      this.get_worker();
      this.initializeListDate();
      this.abilityList = sessionStorage.getItem('abilityList');
    },
    methods: {
      openmapcr(e) {
        this.isMap = true;
        var vm = this;
        setTimeout(function () {
          vm.$refs.baseMap.creationMap();
          var arr = [{
            id: e.id,
            name: "",
            borderColor: "#ffffff",
            fillColor: "#dd2c00",
            data: {},
            geojson: {coordinates: [e.eastLongitude, e.northernLatitude], type: "Point"}
          }];
          if (arr.length != 0) {
            vm.$refs.baseMap.previewshape(arr, "table_Point");
          }
        }, 500)
      },
      colsemap() {
        this.isMap = false;
      },
      delmessage(e) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var vm = this;
          (async function () {
            await http.delete(api.infrared.cdelete + "?id=" + e.id, {}
            )
            vm.$message({
              type: 'success',
              message: '删除成功!'
            });
            vm.initializeListDate();
          })()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      initializeListDate() {
        var isRecov = true;
        var isPublish = false;

        if (this.crstatus == "已回收") {
          isRecov = true;
          isPublish = false;
        }
        if (this.crstatus == "未回收") {
          isRecov = false;
          isPublish = false;
        }
        if (this.crstatus == "已发布") {
          isPublish = true;
          isRecov = false;
        }

        var layUser = this.pswList.join(",");
        var recovUser = this.prwList.join(",");


        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.cameraEnvirs,
            {
              pageSize: vm.pageSize,
              pageNum: vm.pageNum,
              areaId: vm.areaId,
              cameraNumber: vm.cardNum,
              layUser: layUser,
              recovUser: recovUser,
              layTime: vm.t1,
              recovTime: vm.t2,
              isRecov: isRecov,
              isPublish: isPublish
            })

          vm.searchList = res.data.content;
          vm.totalNumber = res.data.totalElements
        })()
      },
      //分页
      handleCurrentChange(val) {
        this.pageNum = val;
        this.initializeListDate();
      },
      filtration(item) {
        if (item == "RECOVER") {
          return "已回收"
        }
        if (item == "LAY") {
          return "未回收"
        }
        if (item == "PUBLISH") {
          return "已发布"
        }
      },
      getcn() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.getCameraNumber, {
            areaId: vm.areaId,
            status: "all"
          })
          vm.cardNumArr = res.data;
        })()
      },
      openpsw() {
        this.pswb = !this.pswb;
      },
      handleClose() {
        this.pswb = false
      },
      openprw() {
        this.prwb = !this.prwb;
      },
      handle() {
        this.prwb = false;
      },
      Closefocus() {
        this.handleClose();
        this.handle();
      },
      changecard() {
        this.pageNum = 1;
        this.currentPage = 1;
        this.initializeListDate();
      },
      gohistorydel(e) {
        this.$router.push("/history/historicaldetails")
        sessionStorage.setItem('HDD', JSON.stringify(e));
      },
      trandate(daterange) {
        if (this.pst != null) {
          var year = daterange[0].getFullYear();
          var month = daterange[0].getMonth() + 1;
          var date = daterange[0].getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (date >= 0 && date <= 9) {
            date = "0" + date;
          }
          var t1 = year + "-" + month + "-" + date;
          var years = daterange[1].getFullYear();
          var months = daterange[1].getMonth() + 1;
          var dates = daterange[1].getDate();
          if (months >= 1 && months <= 9) {
            months = "0" + months;
          }
          if (dates >= 0 && dates <= 9) {
            dates = "0" + dates;
          }
          var t2 = years + "-" + months + "-" + dates;
          this.t1 = t1 + "~" + t2
        } else {
          this.t1 = "";
        }
        this.pageNum = 1;
        this.currentPage = 1;
        this.initializeListDate();
      },
      trandates(daterange) {
        if (this.rst != null) {
          var year = daterange[0].getFullYear();
          var month = daterange[0].getMonth() + 1;
          var date = daterange[0].getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (date >= 0 && date <= 9) {
            date = "0" + date;
          }
          var t1 = year + "-" + month + "-" + date;
          var years = daterange[1].getFullYear();
          var months = daterange[1].getMonth() + 1;
          var dates = daterange[1].getDate();
          if (months >= 1 && months <= 9) {
            months = "0" + months;
          }
          if (dates >= 0 && dates <= 9) {
            dates = "0" + dates;
          }
          var t2 = years + "-" + months + "-" + dates;
          this.t2 = t1 + "~" + t2
        } else {
          this.t2 = "";
        }
        this.pageNum = 1;
        this.currentPage = 1;
        this.initializeListDate();
      },
      getpswb() {
        this.pswork = this.pswList.join("、");
        if (this.pswList.length == 0) {
          this.pswork = '布设人员'
        }
        this.pageNum = 1;
        this.currentPage = 1;
        this.initializeListDate();
      },
      getprwb() {
        this.prwork = this.prwList.join("、");
        if (this.prwList.length == 0) {
          this.prwork = '回收人员'
        }
        this.pageNum = 1;
        this.currentPage = 1;
        this.initializeListDate();
      },
      changecrstatus() {
        this.pageNum = 1;
        this.currentPage = 1;
        this.initializeListDate();
      },
      clearcondition() {
        this.pst = '';
        this.rst = '';
        this.t1 = '';
        this.t2 = '';
        this.cardNum = "";
        this.pswork = '布设人员';
        this.prwork = '回收人员';
        this.pswList = [];
        this.prwList = [];
        this.crstatus = "已回收";
        this.pageNum = 1;
        this.currentPage = 1;
        this.initializeListDate();
      },

      get_worker() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.cameraUsers,
            {
              areaId: vm.areaId
            })
          vm.worker = res.data;
        })()
      },
    },
    beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next()
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.initializeListDate();
      })
    }
  }
</script>
<style scoped>
  @import "../../static/css/history.css";
</style>
<style>
  .condition .el-select {
    width: 2.1rem;
  }

  .condition .el-input__inner {
    line-height: .4rem;
    height: .4rem;
  }

  .condition .el-input__icon, .el-icon-date {
    line-height: .4rem;
    height: .4rem;
  }

  .pagecr .el-pagination button, .el-pagination span:not([class*=suffix]) {
    display: inline-block;
    min-width: 0.355rem;
    height: 0.28rem;
    line-height: 0.28rem;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 0.14rem;
    color: #565758;
    letter-spacing: 0;
  }

  .pagecr .el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon {
    display: block;
    font-size: 0.12rem;
    font-weight: 700;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #F4F4F5;
    /*background-color: red;*/
    border-radius: 50%;
    line-height: 0.3rem;
    text-align: center;
  }

  .pagecr .el-pager li {
    padding: 0 !important;
    /*font-size: 13px;*/
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.1rem;
    min-width: 0;
    background-color: #F4F4F5;
    border-radius: 50%;
    line-height: 0.3rem;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 0.14rem;
    color: #C0C4CC;
    letter-spacing: 0;
    text-align: center;
  }

  .pagecr .el-pager li.active {
    width: 0.3rem;
    height: 0.3rem;
    padding: 0 !important;
    background-color: #00CC46;;
    color: #fff;
    border-radius: 50% !important;
  }

  .pagecr .el-pager li:hover {
    color: #00CC46;
  }

  .pagecr .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 0.04rem;
    border: 0.01rem solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 0.24rem;
    line-height: 0.24rem;
    outline: 0;
    /*padding: 0 0.15rem;*/
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    /*width: 0.4rem !important;*/
  }
</style>
